﻿@model Jb.Web.ViewModels.JobSeekerViewModel
@using Jb.Web.Utility;
@using Jb.Common.Extensions;
@using Jb.Web.ViewModels;
@{
    Layout = "~/Views/Shared/_PopupLayout.cshtml";
    ViewBag.Title = Html.GetPageTitle("Job Seeker Profile Photo");
    int _JobSeekerID = Model == null ? 0 : Model.ID; //ViewBag.CompanyID;
    String _TempUploadedImageUrl = ViewBag.CropBoxImageUrl;
}
<div class="jb-page-heading">
    <h1>Upload Profile Photo</h1>
    <div>
        @if (_TempUploadedImageUrl.IsNullOrEmpty()) {
            <text>Select your photo at first, don't worry about its size, we will guide you to make it correct.</text>
        }
        else {
            <text>Now use your mouse to move and resize the crop rectangle arround your photo to choose the exact area and size.</text>
        }
    </div>
</div>

<div class="jb-page-content">
    @if (Model == null)
    {
        @Html.WarningMessageBox("Sorry! Requested JobSeeker does not exist.")
    }
    else
    {
        if (Model.Name == AppConstants.ValueOf.UNKNOWN){
            Model.Name = "Your";
        }
        <table cellpadding="0" cellspacing="0" style="border-collapse:collapse; width:953px;">
            <colgroup>
                <col style="width:205px;" />
                <col style="width:543px;"/>
                <col style="width:205px;" />
            </colgroup>
            <tr>
                @*Left Column*@
                <td class="jb-border-right" style="vertical-align:top; padding:5px 5px 0px 0px;">
                    <div id="divThumbContainer">                    
                        <div id="divThumbLogo" class="jb-photo" style="display:@(Model.PhotoFile.IsNullOrEmpty() ? "none" : "block");">
                            <a href="javascript:void(0);" onclick="ConformDeleteDialog(@Model.ID, this);" title="Click to Delete this Logo.">
                                <img id="imgJobSeekerPhoto" src="@ImageManager.GetJobSeekerPhotoUrl(Model.PhotoFile, Model.ID)" alt="@Model.Name Photo" title="@Model.Name Photo" />                                
                            </a>
                        </div>                    
                    </div>
                    <div id="divPosition"></div>
                </td>
                @*Middle Column*@
                <td class="jb-border-right" style="vertical-align:top;  padding:5px 5px 0px 5px;">
                    <div style="min-height:400px;">
                    <form id="frmJobSeekerPhoto" action="@Url.JobSeekerUrl("PhotoList", "Home")" method="post" enctype="multipart/form-data">            
                        <div>
                            <div id="trUploadControls" @{if (!_TempUploadedImageUrl.IsNullOrEmpty()) { <text> style="display:none;"</text>}}>
                                <div class="editor-label">Select your photo &nbsp;</div>
                                <div class="editor-field">
                                    <input id="fileJobSeekerPhoto" type="file" name="jobSeekerPhoto" onchange="ValidateUpload();" class="hidden"/>
                                    <div class="input-append">
                                        <input type="text" id="JobSeekerPhoto_Cosmetic" />
			                            <a class="btn" onclick="$('#fileJobSeekerPhoto').click();">Browse</a>
                                    </div>
                                </div>
                                @*<div class="clearfix"></div>*@
                            </div>
                            @*<table cellpadding="3" cellspacing="0" style="width:100%; border-collapse:collapse;">
                                <tr id="trUploadControls" @{if (!_TempUploadedImageUrl.IsNullOrEmpty()) { <text> style="display:none;"</text>}}>
                                    <td style="width:160px;">Select your photo</td>
                                    <td><input id="fileJobSeekerPhoto" type="file" name="jobSeekerPhoto" onchange="ValidateUpload();" /></td>                                    
                                </tr>
                            </table>*@
                            @if (ViewData[AppConstants.ViewDataKeys.IMAGE_UPLOAD_ERROR] != null)
                            {
                                @Html.WarningMessageBox(ViewData[AppConstants.ViewDataKeys.IMAGE_UPLOAD_ERROR] as String)    
                            }
                            <input type="hidden" name="hdnWidthHeight" id="hdnWidthHeight" value="@ViewBag.WidthHeight" />
                            <input type="hidden" name="jobSeekerID" id="jobSeekerID" value="@_JobSeekerID" />
                            <input id="hdnCoordinates" type="hidden" value="" />
                            @*<input id="hdnProductImageID" name="productImageID" type="hidden" value="@_ProductImageID" />*@
                            <input id="hdnOriginalFileName" name="hdnOriginalFileName" type="hidden" value="@ViewData[AppConstants.ViewDataKeys.ORIGINAL_FILE_NAME]" />
                        </div>
                        @*<img id="imgjCrop" src="/Temp/Hydrangeas.jpg" title="" alt="" />*@
                        <div class="cropbox">
                            <div id="divCropBoxContainer" class="cropbox">                    
                                <img id="imgCropBox" src="@(_TempUploadedImageUrl)" alt="" @{if (_TempUploadedImageUrl.IsNullOrEmpty()){<text>style="display:none;"</text>}}/>
                            </div>                            
                        </div>
                    </form>
                    </div>                 
                </td>
                @*Right Column*@
                <td style="vertical-align:top; padding:5px 0px 0px 5px;">
                    <div style="overflow: hidden; width:200px; height:150px; margin-bottom:10px;">
                        <img id="imgPreview" class="jcrop-preview" src="@ViewBag.CropBoxImageUrl" alt="" />
                    </div>
                    @if (!_TempUploadedImageUrl.IsNullOrEmpty()){
                    <div id="divButtons">
                        <button type="button" class="btn btn-primary" id="btnSave" onclick="CropAndSaveImage();">Save</button>
                        <button type="button" class="btn" id="btnCancel" onclick="CancelImageCrop();">Cancel</button>
                    </div>
                    }
                </td>
            </tr>
        </table>
        
        <div id="dialog" style="display:none;"></div>
        <div id="deleteDialog" style="display:none;">Do you really want to Delete this Logo?</div>
    }
</div>

@section PageHeadSection
{
    <link href="@Url.Content("~/Content/jquery.Jcrop.css")" rel="Stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/jb-ui/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .jb-page-heading{margin-bottom:0px;}
    </style>
}
        
@section JavaScriptPlaceHolder
{

    @Html.JavaScript("jquery.Jcrop.min.js", Url)
    @Html.JavaScript("jquery-ui-1.8.11.min.js", Url)
    <script language="Javascript" type="text/javascript">
        //var _JobSeekerID = @_JobSeekerID;        
        $(document).ready(function(){
            BindImageCropper();
            $('#dialog').dialog({
                autoOpen: false, width: 400,
                buttons: {
                    "Ok": function () { $(this).dialog("close"); }
                }
            });
            $('#deleteDialog').dialog({
                autoOpen: false, width: 400,
                buttons: {
                    'Ok': function () { ShowLoadingAnimation(false); DeleteImage(); $(this).dialog("close"); },
                    'Cancel' : function() { $(this).dialog("close"); }
                }
            });            
            $('#fileJobSeekerPhoto').change(function () {
                $('#JobSeekerPhoto_Cosmetic').val($(this).val());
            });
            parent.ChildHideLoading();                
        });
        function SetCoordinates(c) {        
            $('#hdnCoordinates').val(c.x + ',' + c.y + ',' + c.w + ',' + c.h );
        }
        var _jCropApi;
        var _ActualWidth = 0;
        var _ActualHeight = 0;
        function BindImageCropper() {
            var widthAndHeight = $('#hdnWidthHeight').val();
            if(widthAndHeight.length > 0)
            {
                if (_jCropApi) _jCropApi.destroy();
                $('#imgCropBox').Jcrop({
                    setSelect: [0, 0, 200, 150],
                    onChange: ShowPreview,
                    onSelect: ShowPreview,
                    aspectRatio: @ConfigReader.JobSeekerPhotoAspectRatio
                }, function () {
                    _ActualWidth = widthAndHeight.split(',')[0];
                    _ActualHeight = widthAndHeight.split(',')[1];
                    _jCropApi = this;
                    parent.AdjustiFrameHeight($(document).height());
                });                    
            }
            else
                parent.AdjustiFrameHeight($(document).height());
        }  

        function ShowPreview(coords) {
            SetCoordinates(coords);
            if (parseInt(coords.w) > 0 && _ActualWidth > 0 && _ActualHeight > 0) {
                var rx = 200 / coords.w;
                var ry = 150 / coords.h;

                $('#imgPreview').css({
                    width: Math.round(rx * _ActualWidth) + 'px',
                    height: Math.round(ry * _ActualHeight) + 'px',                        
                    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
                    marginTop: '-' + Math.round(ry * coords.y) + 'px'
                });
            }
        }
        function CropAndSaveImage() {             
            var coordinates =  $('#hdnCoordinates').val();
            if(coordinates.length > 0)
            {
                var url= '@Url.JobSeekerUrl("CropAndSaveImage", "Home")';
                var data = { ID: $('#jobSeekerID').val(), PhotoFile: $('#imgCropBox').attr('src'), CropProperty: coordinates, OriginalFileName: $('#hdnOriginalFileName').val() };
                Ajax(url, data, CropAndSaveImage_Success);
            }
            else
                $('#dialog').html('Please Select and Upload an Image first to Set it as your Profile Photo.').dialog('open'); //alert("Please Select and Upload an Image first to Set it as a Product Image."); 
        }

        function CropAndSaveImage_Success(obj){
            var image = eval(obj);
            $('#divCropBoxContainer').hide();
            $('#imgPreview').hide();
            $('#btnSave').attr('disabled', true);   
            $('#divThumbLogo').show();
            $('#trUploadControls').slideDown('slow');
            $('#divButtons').fadeOut('slow');
            $('#imgJobSeekerPhoto').attr('src', image.PhotoFile);
            parent.SetLogo(image.PhotoFile);
            parent.AdjustiFrameHeight('iframeImageList');
        }

        var _AnchorToDelete = null;
        var _ImageIdToDelete = 0;
        function ConformDeleteDialog(jobSeekerID, anchorElement) {
            _ImageIdToDelete = jobSeekerID;
            _AnchorToDelete = anchorElement;
            $('#deleteDialog').dialog('open');
        }
        function DeleteImage()
        {
            var url = '@Url.JobSeekerUrl("DeletePhoto", "Home")';
            var data = 'jobSeekerID=' + _ImageIdToDelete;
            Ajax(url, data, Delete_Success);
        }
        function Delete_Success(isDeleted){
            if(isDeleted){
                $('#divThumbLogo').hide();                
                $('#dialog').html('Your Photo Deleted Successfully.').dialog('open');//.modal({show: true});
                parent.SetLogo('@(ImageManager.GetJobSeekerPhotoUrl(String.Empty, Model.ID))');
                setTimeout(function () { $('#dialog').dialog('close'); }, 3000);
                parent.AdjustiFrameHeight('iframeImageList');
            }
            else
                $('#dialog').html('Sorry! Requested Image was not found for Delete.').dialog('open');
            HideLoadingAnimation();
        }
        function ValidateUpload() {
            if($('#fileJobSeekerPhoto').val().length > 0){
                ShowLoadingAnimation(false);
                $('#frmJobSeekerPhoto').submit();
            }
            else
                return false;
            return true;
        }
        function CancelImageCrop()
        {
            $('#divCropBoxContainer').slideUp('slow');
            $('#trUploadControls').slideDown('slow');                
            $('#divButtons').fadeOut('slow');
            $('#imgPreview').fadeOut('slow');
            $('#hdnCoordinates').val('');
            Ajax('@(Url.PublicUrl("DeleteTempImage", "Ajax"))', 'imagePath=@(_TempUploadedImageUrl)', 
                function (isDeleted){
                    //alert(isDeleted);
                }); 
        }
    </script>
}
